<template>
  <div class="comment_main">
    <div class="icon">
      <div class="like" @click="handlePoint(1)">
        <img :src="likesrc">
      </div>
      <div class="star" @click="handlePoint(2)">
        <img :src="starsrc">
      </div>
      
    </div>

    <div class="comment_input">
      <el-input
        v-model="comment"
        placeholder="留下精彩的评论吧！"
        class="input-with-select"
      >
        <template #append>
          <el-button @click="handleSub" color="#42b983" :icon="ArrowDownBold" />
        </template>
      </el-input>
    </div>
    <div class="list">
      <!-- <div class="list_item">
        <div class="name">级头劳因少</div>
        <div class="comment" >等哈圣诞节凯撒活动空间</div>
        <div class="time">2023-11-07T06:23:43.013Z</div>
      </div>
      <div class="list_item">
        <div class="name">级头劳因少</div>
        <div class="comment" >等哈圣诞节凯撒活动空间</div>
        <div class="time">2023-11-07T06:23:43.013Z</div>
      </div>
      <div class="list_item">
        <div class="name">级头劳因少</div>
        <div class="comment" >等哈圣诞节凯撒活动空间</div>
        <div class="time">2023-11-07T06:23:43.013Z</div>
      </div>
      <div class="list_item">
        <div class="name">级头劳因少</div>
        <div class="comment" >等哈圣诞节凯撒活动空间</div>
        <div class="time">2023-11-07T06:23:43.013Z</div>
      </div>
      <div class="list_item">
        <div class="name">级头劳因少</div>
        <div class="comment" >等哈圣诞节凯撒活动空间</div>
        <div class="time">2023-11-07T06:23:43.013Z</div>
      </div>
      <div class="list_item">
        <div class="name">级头劳因少</div>
        <div class="comment" >等哈圣诞节凯撒活动空间</div>
        <div class="time">2023-11-07T06:23:43.013Z</div>
      </div> -->
      <div class="list_item" v-for="item in commentlist" :key="item.token">
        <div class="name">{{ item.user }}</div>
        <div class="comment" >{{ item.content }}</div>
        <div class="time">{{ item.time }}</div>
      </div>

    </div>

  </div>
</template>


<script setup>
import {onMounted, ref,defineProps} from "vue"
import{ArrowDownBold} from '@element-plus/icons-vue'
import { request } from "@/utils/request";
import { ElMessage } from 'element-plus'

let likelist=ref(false)
let starlist=ref(false)
let likesrc=ref('http://43.139.95.60:4009/likebefore.svg')
let starsrc=ref('http://43.139.95.60:4009/starbefore.svg')
let handlePoint =(e)=>{
  if(e==1){
    console.log(likelist.value)
    likesrc.value=likelist.value==true?'http://43.139.95.60:4009/likebefore.svg':'http://43.139.95.60:4009/likeafter.svg'
    likelist.value=!likelist.value
  }else if(e==2){
    starsrc.value=starlist.value==true?'http://43.139.95.60:4009/starbefore.svg':'http://43.139.95.60:4009/starafter.svg'
    starlist.value=!starlist.value
  }
}

   //处理发送评论
   let {id}=defineProps({
      id:{
        type:Number,
        default(){
          return{};
        }
      }
   })
   let comment=ref('')
   async function handleSub(){
    let data={
      token:window.localStorage.getItem('token'),
      id:id,
      comment:comment.value

    }
    if(window.localStorage.getItem('token')){
      const resp=await request('/video/add_comment',{
        method:'post',
        data:JSON.stringify(data)
      })
      if (resp=='success'){
        comment.value=''
        ElMessage({
          message: '评论成功',
          type: 'success',
        })

      }
    }else{
      ElMessage({
      message: '请先登录',
      type: 'warning',
    })
    }
    //登录才能进行操作
    
  }
  //进入页面就获取平路列表
  let commentlist=ref(null)
  async function getcomment(){
    const resp=await request('/video/get_vid_comment',{
      method:'get',
      params:{
        id:id
      }
    })
    commentlist.value=resp.payload
  }


  if(id==1||id==2||id==3||id==9){ 
    console.log('id',id)
    getcomment()
  }
  onMounted(()=>{
    // handlePoint()
  })

</script>

<style lang="less" scoped>
@red:rgb(254,44,85);
.comment_main{
  width:100%;
  height:100%;
  background-color:  #252632;;
  border-radius: 20px;
  display:flex;
  flex-direction: column;
  box-sizing: border-box;
  padding:20px;
  .icon{
    height:100px;
    // background-color: blueviolet;

    display:flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    .like,.star{
      width:200px;
      height:50px;
      display:flex;
      flex-direction: row;
      justify-content: center;
      align-items: flex-start;
      // height:100%;
      cursor: pointer;
      img{
        width:50px;
        // height:20px;
      }
      
    }
  }
  .comment_input{
    height:10%;
    // background-color: black;
    .el-button{
      background-color:@red;
    }
  }

  .list::-webkit-scrollbar {
      width: 0em; /* 设置滚动条宽度 */
    }

    .list::-webkit-scrollbar-thumb {
      background-color: transparent; /* 设置滚动条滑块颜色 */
    }

    .list::-webkit-scrollbar-track {
      background-color: #f1f1f1; /* 设置滚动条轨道颜色 */
    }
  .list{
    flex:1;
    // background-color: rgb(255, 0, 157);
    // padding:10px;
    overflow-y: auto;



    .list_item{
      width:100%;

      display:flex;
      flex-direction:column;
      box-sizing: border-box;
      padding:10px 0 ;
      .name{
        box-sizing: border-box;
        width:100%;
        color:#ccc;
        font-size:0.8rem;
        font-weight: 700;
        padding:5px;
        
      }
      .comment{
        padding:5px;
        box-sizing: border-box;
        width:100%;
        color:#ffffffe6;
        font-size: 1rem;
        font-weight: 700;
      }
      .time{
        box-sizing: border-box;
        padding:5px;
        width:100%;
        text-align: right;
        color:#FFFFFF80;
        font-size:0.7rem;
        font-weight: 700;

      }
    }
  }
}

</style>